<template>
	<view class="b_width hui">

		<view class="box">

			<view class="b_flex_c_s info">
				<view>报修类型</view>
				<view>{{info.kcate}}</view>
			</view>
			<view class="b_flex_c_s info">
				<view>姓名</view>
				<view>{{info.name}}</view>
			</view>
			<view class="b_flex_c_s info">
				<view>联系电话</view>
				<view>{{info.mobile}}</view>
			</view>
			<view class="info">
				<view>地点</view>
				<view>{{info.site}}</view>
			</view>
			<view class="info">
				<view>描述</view>
				<view>{{info.ms}}</view>
			</view>
			<view class="info" v-if="info.images&&info.images.length>0">
				<view>图片/视频</view>
				<view  class="img_box">
					<view  v-for="(items,indexs) in info.images"
						:key="indexs">
						<image @click="previewImage(items.url)" v-if="items.type==1" :src="items.url" class="img"></image>
						<video class="video" :src="items.url" v-if="items.type==2"></video> 
					</view>
				</view>
			</view>
			<view class="b_flex_c_s info">
				<view>上报时间: {{info.createtime}}</view>
				<view></view>
			</view>
		</view>
		
		<view class="text" v-if="info.status==4">处理进度</view>
		
		<view class="box" v-if="info.status==4">
		
			<view class="b_flex_c_s info">
				<view>处理结果: 已完成</view>
				<view></view>
			</view>
			<view class="b_flex_c_s info" v-if="info.wx">
				<view>处理人: {{info.wx.nickname}}</view>
				<view></view>
			</view>
			<view class="b_flex_c_s info">
				<view>完成时间: {{info.w_time}}</view>
				<view></view>
			</view>
	
			<view class="info">
				<view>{{info.content}}</view>
				<view></view>
			</view>
			<view class="info" v-if="info.cimages&&info.cimages.length>0">
				<view></view>
				<view  class="img_box">
					<view  v-for="(items,indexs) in info.cimages"
						:key="indexs">
						<image @click="previewImage(items.url)" v-if="items.type==1" :src="items.url" class="img"></image>
						<video class="video" :src="items.url" v-if="items.type==2"></video> 
					</view>
				</view>
			</view>
		</view>
		
		<view style="height: 180rpx;" v-if="info.status<4"></view>
		<view class="bottom" v-if="info.status<4">
				 
			<view class="btn btn_blue" v-if="info.status==2" @click="start()">确认服务开始</view>
				<view class="btn btn_blue" v-if="info.status==3" @click="que()">服务完成</view> 
		</view> 
		
		<u-popup :closeable="true" v-model="show" mode="center" border-radius="14">
			<view class="form_box">
		
				<view class="xx_title">请填写处理说明</view>
		
				<view class="xx_box">
					<view class="input_box">
						<textarea class="ms" v-model="form.content" placeholder="请输入备注说明"
							placeholder-style="color:#CECECE"></textarea>
					</view>
		
				</view>
		
				<view class="xx_box">
					<view class="input_box">
						<view class="b_flex_c">
							<view class="img_text">上传图片/视频</view>
						</view>
						<view class="upload_box">
							<upload vmax='1' v-model="form.cimages"></upload>
						</view>
					</view>
				</view>
		
				<view class="dj_btn" @click="ques()">提交</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import upload from "@/components/upload.vue";
	export default {
		components: {
			upload
		},
		data() {
			return {
				id: '',
				info: {},
				show: false,
				form: {
					content: '',
					cimages: ''
				},
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.getInfo();
			}
		},
		methods: {
			que(){
				
				this.show = true;
			},
			ques(){
				let _=this;
				uni.showModal({
					title:'温馨提示',
					content:'确认服务完成?',
					success: (res) => {
						if(res.confirm){
							
							_.form.id=_.info.id;
							_.form.token=uni.getStorageSync('gdToken');
							
							_.$post(_.$api.keepQue,_.form,ress=>{
								let {code,data,msg}=ress.data;
									_.$project.toast(msg);
								if(code==1){
								   _.show=false;
								  _.getInfo();
									
								}
							});
							
						}
					}
				})
			},
			start(){
				let _=this;
				uni.showModal({
					title:'温馨提示',
					content:'是否确认开始服务?',
					success: (res) => {
						if(res.confirm){
							
							_.$post(_.$api.keepStart,{id:_.info.id,token:uni.getStorageSync('gdToken')},ress=>{
								let {code,data,msg}=ress.data;
								_.$project.toast(msg);
								if(code==1){
									
								    _.getInfo();
									
								}
							});
							
						}
					}
				})
			},
			previewImage(e) {
				uni.previewImage({
					urls: [e]
				});
			},
			getInfo(id) {
				this.$get(this.$api.keepWinfo, {
					id: this.id,
					token:uni.getStorageSync('gdToken')
				}, res => {
					let {
						code,
						data
					} = res.data;
					if (code == 1) {
						this.info = data;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.img_box{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.b_flex_c {
		display: flex;
		align-items: center;
	}

	.b_flex {
		display: flex;
	}

	.b_flex_c_s {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.status_box {
		background-color: #1677fe;
		color: white;
		box-sizing: border-box;
		padding: 30rpx 30rpx;
		margin-bottom: 30rpx;
	}

	.sh_img {
		width: 50rpx;
		margin-right: 20rpx;
	}

	.box {
		box-sizing: border-box;
		padding: 30rpx 30rpx;
		background-color: white;
		margin-bottom: 30rpx;
	}

	.mobile {
		color: #8E8E8E;
		font-size: 26rpx;
		margin-left: 10rpx;
	}

	.site {
		font-size: 26rpx;
		margin-top: 5rpx;
	}

	.title {
		box-sizing: border-box;
		padding: 0 0 30rpx 0;
		border-bottom: 1rpx solid #eee;
		font-weight: bold;
	}

	.ginfo {
		margin-left: 5%;
		width: 60%;
	}

	.m_b {
		margin-top: 30rpx;
	}

	.num {
		color: #999;
		font-size: 24rpx;
		margin-top: 20rpx;
		text-align: right;
	}

	.info {
		box-sizing: border-box;
		padding: 20rpx 0 0 0;
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 40rpx 30rpx 40rpx 30rpx;
		background-color: white;
	}

	.btn {
		box-sizing: border-box;
		padding: 15rpx 50rpx;
		border: 1rpx solid black;
		font-size: 26rpx;
		border-radius: 45rpx;
		margin-left: 20rpx;
	}

	.btn_red {
		border: 1rpx solid red;
		color: red;
	}
	
	.video{
		width: 470rpx;
		height: 180rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}
	
	.img {
		width: 180rpx;
		height: 180rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}
	.bottom{
		position: fixed;
		left:0;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 40rpx 30rpx 40rpx 30rpx;
		background-color: white;
	}
	.btn{
		box-sizing: border-box;
		padding: 15rpx 50rpx;
		border: 1rpx solid black;
		font-size: 26rpx;
		border-radius: 45rpx;
		margin-left: 20rpx;
	}
	.btn_red{
			border: 1rpx solid red;
			color:red;
	}
	.btn_blue{
		border: 1rpx solid #E34305;
		color:#E34305;
	}
	.dj_btn {
		box-sizing: border-box;
		padding: 25rpx 0;
		border-radius: 10rpx;
		background-color: #E71B06;
		color: white;
		
		margin-top: 30rpx;
		text-align: center;
	}
	
	.form_box {
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		font-size: 28rpx;
	}
	
	.xx_box {
		box-sizing: border-box;
		padding: 0rpx 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}
	
	.input_box {
		box-sizing: border-box;
		padding: 30rpx 0;
	}
	
	.img_text {
		margin-left: 10rpx;
	}
	
	.ms {
		height: 220rpx;
		border: 1rpx solid #E7E5E5;
		box-sizing: border-box;
		padding: 20rpx 0 0 20rpx;
	}
	
	.xx_title {
		text-align: center;
		font-weight: bold;
	}
	.text{
		color: #C11010;
		margin-left: 20rpx;
		margin-bottom: 30rpx;
	}
</style>